import React from "react"
import queryString from 'query-string'
import { BrowserRouter as Router, Route, Link, NavLink, Redirect, Switch, withRouter } from 'react-router-dom'
import Paihangbangcss from "./style/index.module.css"
import img1 from "./img/返回1.png"
class Paihangbang extends React.Component {
    state = {
        zhoumozuanyong: [],
        zhoumozuanyong1: [],
        zhoumozuanyong2: [],
        zhoumozuanyong3: [],
        zhoumozuanyong4: [],
        zhoumozuanyong5: [],
        zhoumozuanyong6: [],
        zhoumozuanyong7: [],
        yuanningzuanyong: [],
        yuanningzuanyong1: [],
        yuanningzuanyong2: [],
        yuanningzuanyong3: [],
        yuanningzuanyong4: [],
        yuanningzuanyong5: [],
        yuanningzuanyong6: [],
        yuanningzuanyong7: [],
        yuanningzuanyong8: [],
        yuanningzuanyong9: [],
        yuanningzuanyong10: [],
        yuanningzuanyong11: [],
        yuanningzuanyong12: [],
        yuanningzuanyong13: [],
        yuanningzuanyong14: [],
        yuanningzuanyong15: [],
        yuanningzuanyong16: [],
        yuanningzuanyong17: [],
        yuanningzuanyong18: [],
        yuanningzuanyong19: [],
        yuanningzuanyong20: [],
        yuanningzuanyong21: [],
    }
    img1fanhui() {
        // this.props.history.goBack()
        this.props.history.push("/gen/Find")
    }
    componentWillMount() {
        fetch('http://106.12.79.128:666/top/list?idx=3')
            .then(body => body.json())
            .then(res => {
                // console.log(res.playlist)
                // console.log(res.playlist.coverImgUrl)
                // console.log(res.playlist.tracks[1].al.name)
                // console.log(res.playlist.tracks[1].ar[0].name)
                // console.log(res.playlist.tracks[2].id)
                this.setState({
                    zhoumozuanyong: res.playlist.coverImgUrl
                })
            })
        fetch('http://106.12.79.128:666/top/list?idx=3')
            .then(body => body.json())
            .then(res => {
                for (var i = 0; i < 3; i++) {
                    (this.state.zhoumozuanyong1).push(res.playlist.tracks[i])
                    this.setState({
                    })
                }
            })
        // -------------------------------------------------
        fetch('http://106.12.79.128:666/top/list?idx=0')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    zhoumozuanyong2: res.playlist.coverImgUrl
                })
            })
        fetch('http://106.12.79.128:666/top/list?idx=0')
            .then(body => body.json())
            .then(res => {
                for (var i = 0; i < 3; i++) {
                    (this.state.zhoumozuanyong3).push(res.playlist.tracks[i])
                    this.setState({
                    })
                }
            })
        // -------------------------------------------------
        fetch('http://106.12.79.128:666/top/list?idx=1')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    zhoumozuanyong4: res.playlist.coverImgUrl
                })
            })
        fetch('http://106.12.79.128:666/top/list?idx=1')
            .then(body => body.json())
            .then(res => {
                for (var i = 0; i < 3; i++) {
                    (this.state.zhoumozuanyong5).push(res.playlist.tracks[i])
                    this.setState({
                    })
                }
            })
        // -------------------------------------------------
        fetch('http://106.12.79.128:666/top/list?idx=2')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    zhoumozuanyong6: res.playlist.coverImgUrl
                })
            })
        fetch('http://106.12.79.128:666/top/list?idx=2')
            .then(body => body.json())
            .then(res => {
                for (var i = 0; i < 3; i++) {
                    (this.state.zhoumozuanyong7).push(res.playlist.tracks[i])
                    this.setState({
                    })
                }
            })
        // -------------------------------------------------
        fetch('http://106.12.91.147:3000/top/list?idx=4')
            .then(body => body.json())
            .then(res => {
                console.log(res.playlist)
                console.log(res.playlist.coverImgUrl)
                console.log(res.playlist.tracks[1].al.name)
                console.log(res.playlist.tracks[1].ar[0].name)
                console.log(res.playlist.tracks[2].id)
                this.setState({
                    yuanningzuanyong: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=5')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong1: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=6')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong2: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=7')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong3: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=8')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong4: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=9')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong5: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=10')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong6: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=11')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong7: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=12')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong8: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=16')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong9: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=14')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong10: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=15')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong11: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=17')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong12: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=18')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong13: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=19')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong14: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=20')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong15: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=21')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong16: res.playlist
                })
            })
        fetch('http://106.12.91.147:3000/top/list?idx=22')
            .then(body => body.json())
            .then(res => {
                this.setState({
                    yuanningzuanyong17: res.playlist
                })
            })
        // -------------------------------------------------
    }
    render() {
        let { zhoumozuanyong, zhoumozuanyong1, zhoumozuanyong2, zhoumozuanyong3, zhoumozuanyong4
            , zhoumozuanyong5, zhoumozuanyong6, zhoumozuanyong7, yuanningzuanyong, yuanningzuanyong1
            , yuanningzuanyong2, yuanningzuanyong3, yuanningzuanyong4, yuanningzuanyong5, yuanningzuanyong6
            , yuanningzuanyong7, yuanningzuanyong8, yuanningzuanyong9, yuanningzuanyong10, yuanningzuanyong11
            , yuanningzuanyong12, yuanningzuanyong13, yuanningzuanyong14, yuanningzuanyong15, yuanningzuanyong16
            , yuanningzuanyong17, yuanningzuanyong18, yuanningzuanyong19, yuanningzuanyong20, yuanningzuanyong21
        } = this.state
        // console.log(zhoumozuanyong1[0].id);
        return (
            <div>
                <div>
                    <img onClick={this.img1fanhui.bind(this)} className={Paihangbangcss.img1} src={img1} alt="" />
                    <span className={Paihangbangcss.divspan1}>排行榜</span>
                </div>
                <div>
                    <span className={Paihangbangcss.div2span1}>官方榜</span>
                    {/* -----------------------------------飙升榜--------------------------------------------- */}
                    <div className={Paihangbangcss.div2div1}>
                        <div>
                            <img  id={Paihangbangcss.Litemimg} src={zhoumozuanyong} alt="" />
                        </div>
                        <div className={Paihangbangcss.Litemdiv}>
                            <ul>
                                {
                                    zhoumozuanyong1.map((item, index) =>
                                        <li className={Paihangbangcss.Litemli} key={item.id}>
                                            {/* <a className={Paihangbangcss.Litema} href="#"> */}
                                                <span  className={Paihangbangcss.Litemspan}>
                                                    {index + 1}.{item.al.name}--{item.ar[0].name}</span>
                                            {/* </a> */}
                                        </li>
                                    )
                                }
                            </ul>
                        </div>
                    </div>
                    {/* -----------------------------------新歌榜--------------------------------------------- */}
                    <div className={Paihangbangcss.div2div1}>
                        <div>
                            <img id={Paihangbangcss.Litemimg} src={zhoumozuanyong2} alt="" />
                        </div>
                        <div className={Paihangbangcss.Litemdiv}>
                            <ul>
                                {
                                    zhoumozuanyong3.map((item, index) =>
                                        <li className={Paihangbangcss.Litemli} key={item.id}>
                                            <a className={Paihangbangcss.Litema} href="#">
                                                <span className={Paihangbangcss.Litemspan}>
                                                    {index + 1}.{item.al.name}--{item.ar[0].name}</span>
                                            </a>
                                        </li>
                                    )
                                }
                            </ul>
                        </div>
                    </div>
                    {/* -----------------------------------热歌榜--------------------------------------------- */}
                    <div className={Paihangbangcss.div2div1}>
                        <div>
                            <img id={Paihangbangcss.Litemimg} src={zhoumozuanyong4} alt="" />
                        </div>
                        <div className={Paihangbangcss.Litemdiv}>
                            <ul>
                                {
                                    zhoumozuanyong5.map((item, index) =>
                                        <li className={Paihangbangcss.Litemli} key={item.id}>
                                            <a className={Paihangbangcss.Litema} href="#">
                                                <span className={Paihangbangcss.Litemspan}>
                                                    {index + 1}.{item.al.name}--{item.ar[0].name}</span>
                                            </a>
                                        </li>
                                    )
                                }
                            </ul>
                        </div>
                    </div>
                    {/* -----------------------------------原创榜--------------------------------------------- */}
                    <div className={Paihangbangcss.div2div1}>
                        <div>
                            <img id={Paihangbangcss.Litemimg} src={zhoumozuanyong6} alt="" />
                        </div>
                        <div className={Paihangbangcss.Litemdiv}>
                            <ul>
                                {
                                    zhoumozuanyong7.map((item, index) =>
                                        <li className={Paihangbangcss.Litemli} key={item.id}>
                                            <a className={Paihangbangcss.Litema} href="#">
                                                <span className={Paihangbangcss.Litemspan}>
                                                    {index + 1}.{item.al.name}--{item.ar[0].name}</span>
                                            </a>
                                        </li>
                                    )
                                }
                            </ul>
                        </div>
                    </div>
                    {/* -----------------------------------推荐榜--------------------------------------------- */}
                    <span className={Paihangbangcss.div2span2}>推荐榜</span>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong1.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong1.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong2.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong2.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong3.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong3.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong4.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong4.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong5.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong5.name}</span>
                        </div>
                    </div>
                    {/* -----------------------------------全球榜--------------------------------------------- */}
                    <span className={Paihangbangcss.div2span2}>全球榜</span>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong6.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong6.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong7.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong7.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong8.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong8.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong9.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong9.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong10.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong10.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong11.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong11.name}</span>
                        </div>
                    </div>
                    {/* -----------------------------------更多榜单--------------------------------------------- */}
                    <span className={Paihangbangcss.div2span2}>更多榜单</span>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong12.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong12.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong13.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong13.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong14.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong14.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong15.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong15.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong16.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong16.name}</span>
                        </div>
                    </div>
                    <div className={Paihangbangcss.div2div2}>
                        <div>
                            <img className={Paihangbangcss.div2div2img1} src={yuanningzuanyong17.coverImgUrl} alt="" />
                        </div>
                        <div className={Paihangbangcss.div2div2span1}>
                            <span>{yuanningzuanyong17.name}</span>
                        </div>
                    </div>

                </div>
            </div>
        )
    }
}
export default Paihangbang